<script setup>
import { onMounted,ref,reactive } from 'vue';
import { useRoute } from 'vue-router';
import { getCosAuth } from '../api/cjp';
import { joinCompetition } from '../api/cjp';
import getCos from '../utils/getCos'
const route = useRoute()
const form = reactive({
	cid: '',
	comment:'',
})
const files = ref()




const handleSubmit = () => {
	const temp = {
		cid: form.cid,
		comment:form.comment,
		pid:route.params.pid
	}
	joinCompetition(temp).then(res => {
		if (res.code === 200 && files.value[0].file.size <= 1024 * 1024 * 100) {
			console.log(1111);
			getCosAuth().then(res => {
				const cos = getCos(res.data)
				cos.uploadFile({
					Bucket: 'lotus-zhaomu-1315134494', /* 填写自己的 bucket，必须字段 */
					Region: 'ap-chengdu',     /* 存储桶所在地域，必须字段 */
					Key: `${temp.pid}-${temp.cid}`,              /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
					Body: files.value[0].file, // 上传文件对象
					Origin: 'http://localhost:3000/',      /* 必须 */
					AccessControlRequestMethod: 'PUT', /* 必须 */
					AccessControlRequestHeaders: 'origin,accept,content-type' /* 非必须 */
				}, (err,data) => {
					console.log(err,data);
				});
			})
		}
	})
}

const handleUpload = (e) => {
	console.log(e);
}
</script>
<template>

	<div class="container">
		<img src="https://lotus-zhaomu-1315134494.cos.ap-chengdu.myqcloud.com/4CE38B00A6CAB6A085BE293BDEF84ED4.jpg"/>
        <van-form @submit="onSubmit" label-width="4em">
            <van-cell-group inset >
				<!-- 输入任意文本 -->
				<van-field v-model="form.cid" type="text" placeholder="" label="赛事ID" />
				<van-field v-model="form.comment" type="text" placeholder="" label="留言" />
				<van-field name="uploader" label="文件上传">
					<template #input>
						<van-uploader accept="*" :after-read="handleUpload"
						 :max-count="1" upload-icon="add" v-model="files" />
					</template>
					</van-field>

			</van-cell-group >
			<van-button round block @click="handleSubmit" type="primary" native-type="submit">
                提交
            </van-button>
        </van-form>
    </div>
</template>

<style scoped>
	.container{
		background-color: var(--main-background-color);
		padding: var(--page-padding) 0px;
		height: 100%;
	}
	#bj {
		background-color: var(--main-background-color);
    	padding: var(--page-padding);
   		height: 100%;
	}

	.van-field__label {
		color: #000000 !important;
	}

</style>
